<template lang="html">
	<div class="errMsg">
		<img src="./img/error.png" alt="">
		<p class="error">{{message}}</p>
		<p class="error">{{errMsg[0]}}</p>
		<!-- 增加下拉箭头，展示错误详情 -->
		<van-collapse v-model="activeNames" v-if="errMsg.length>0">
		  <van-collapse-item title="报错详情" name="1">{{errMsg[1]}}</van-collapse-item>
		</van-collapse>
		<van-button type="info" to="/">返回首页</van-button>
	</div>
</template>

<script>
	import Cookie from 'js-cookie';
	import{ sessionSetItem,sessionGetItem} from 'util/index.js';
	export default {
		name: "Error",
		data: function() {
			return {
				errMsg: [],
				errType: '',
				activeNames: [],
				message:''
			};
		},
		methods: {
			init() {
				// 获取路由前端自己跳转过来带的错误信息
				let message = this.$route.query.message;
				if(message){
					this.message = message;
				}
				// 获取后台传递过来的错误信息
				let res =  Cookie.get('x-response');
				if(!res) return;
				let errorInfo = JSON.parse(decodeURIComponent(res));
				sessionSetItem('errorInfo',errorInfo);
				Cookie.remove('x-response');
				/**
				 * 拿到x-response decodeURI  解析出对象，然后保存到sessionSetItem中
				 * 删除cookie中的x-response
				 * message中的信息，用##号分割，前面的用于展示，后面的用下拉箭头展开错误详情
				 * */ 
				if(errorInfo){
					this.errMsg = errorInfo.message.split('##');
				}
			},
		},
		mounted: function() {
			this.init();
		}
	};
</script>
<style lang="less" scoped>
	.errMsg {
		font-size: 24px;
		text-align: center;
		line-height: 50px;
	}
	.error{
		font-size: 20px;
		color:#606266;
	}
	/deep/ .van-cell{
		background-color: #f1f5f8;
		.van-cell__title{
			color: #909399;
		}
	}
	/deep/ .van-collapse-item__content{
		background-color: #f1f5f8;
	}
</style>
